<template>
    <div>
        <Tabs value="name1"  :animated="false">
            <TabPane label="日志" name="name1">
                <Card style="margin-bottom: 15px;">
                    <template #title>
                        <span style="line-height: 24px;">日志设置</span>
                    </template>
                    <Form :label-width="120">
                        <FormItem label="最大日志数量">
                            <Input v-model="configs.log_maxcount" style="width:300px;"></Input>
                            <p style="color:#aaa;">当日志数量超过该值时，将会自动归档，值不低于1000，不高于50000</p>
                        </FormItem>
                    </Form>
                    <div>
                        <Button type="primary" @click="handleSaveLogConfigs" style="margin-left: 10px;">保存</Button>
                    </div>
                </Card>
            </TabPane>
            <TabPane label="通知" name="name3">
                <Card style="margin-bottom: 15px;">
                    <template #title>
                        <span style="line-height: 24px;">通用设置</span>
                    </template>
                    <Form :label-width="120">
                        <FormItem label="通知时间间隔">
                            <Input v-model="configs.alarm_notice_interval" style="width:300px;"></Input>
                            <Button type="primary" @click="handleSaveNoticeConfigs" style="margin-left: 10px;">保存</Button>
                            <p style="color:#aaa;">设置邮箱、短信等通知间隔多长时间触发一次，不低于10秒</p>
                        </FormItem>
                        <FormItem label="强制使用中继服务器发送">
                            <Switch v-model="configs.notice_force_relay" size="small" @click="handleNoticeForceRelayChange"></Switch>
                            <p style="color:#aaa;">强制使用中继服务器发送通知，需要提前将本机注册到中继服务器</p>
                        </FormItem>
                        <FormItem label="开启邮箱通知">
                            <Switch v-model="configs.email_enable" size="small" @on-change="handleEmailEnableChange"></Switch>
                            <p style="color:#aaa;">如果不使用中继服务，请先做好邮箱设置，再开启邮箱通知功能</p>
                        </FormItem>
                    </Form>
                    <div>
                    </div>
                </Card>
                <Card style="margin-bottom: 15px;">
                    <template #title>
                        <span style="line-height: 24px;">邮箱配置</span>
                    </template>
                    <template #extra>
                    </template>
                    <div>
                        <Form :label-width="150">
                            <Divider orientation="left">发送方设置</Divider>
                            <FormItem label="SMTP_SERVER">
                                <Input v-model="configs.email_smtp_server" style="width:300px;"></Input>
                            </FormItem>
                            <FormItem label="SMTP_PORT">
                                <Input v-model="configs.email_smtp_port" style="width:300px;"></Input>
                            </FormItem>
                            <FormItem label="发送方邮箱">
                                <Input v-model="configs.email_sender_address" style="width:300px;"></Input>
                            </FormItem>
                            <FormItem label="发送方密码或授权码">
                                <Input v-model="configs.email_sender_password" style="width:300px;" type="password" password></Input>
                            </FormItem>
                            <FormItem label="">
                                <Button type="primary" @click="handleSaveEmailConfigs" style="margin-left: 10px;">保存</Button>
                            </FormItem>
                            <Divider orientation="left">接收方设置</Divider>
                            <FormItem label="邮件统一标题">
                                <Input v-model="configs.email_subject"></Input>
                            </FormItem>
                            <FormItem label="收件人邮箱">
                                <Input v-model="configs.email_receiver_address"></Input>
                                <p style="color:#aaa;">多个接收邮箱请用逗号“,”分隔</p>
                            </FormItem>
                            <FormItem label="">
                                <Button type="primary" @click="handleSaveReceiverEmailConfigs" style="margin-left: 10px;">保存</Button>
                                <Button @click="handleTestEmail" style="margin-left: 10px;">测试</Button>
                            </FormItem>
                        </Form>
                        <div>
                        </div>
                    </div>
                </Card>
                <Card style="margin-bottom: 15px;">
                    <template #title>
                        <span style="line-height: 24px;">本机设置</span>
                    </template>
                    <Form :label-width="120">
                        <FormItem label="应用ID">
                            <Input v-model="configs.app_id" style="width:300px;" :border="false" readonly></Input>
                        </FormItem>
                        <FormItem label="应用名称">
                            <Input v-model="configs.app_name" style="width:300px;"></Input>
                        </FormItem>
                        <FormItem label="应用密钥">
                            <Input v-model="configs.app_secret" style="width:300px;" type="password" password :border="false" readonly></Input>
                        </FormItem>
                    </Form>
                    <div>
                        <Button type="primary" @click="handleSaveAppSelfConfigs" style="margin-left: 10px;">保存</Button>
                        <Button type="info" @click="handleCreateAppSecret" style="margin-left: 10px;">更新密钥</Button>
                    </div>
                </Card>
                <Card style="margin-bottom: 15px;">
                    <template #title>
                        <span style="line-height: 24px;">中继服务器设置</span>
                    </template>
                    <Form :label-width="120">
                        <FormItem label="中继服务器地址">
                            <Input v-model="configs.relay_url" style="width:300px;"></Input>
                            <p style="color:#aaa;">带有http://或https://的网络地址，如有必要加上端口号</p>
                        </FormItem>
                        <FormItem label="中继服务器密码">
                            <Input v-model="configs.relay_password" style="width:300px;" type="password" password></Input>
                        </FormItem>
                    </Form>
                    <div>
                        <Button type="primary" @click="handleSaveRelayConfigs" style="margin-left: 10px;">保存</Button>
                        <Button type="info" @click="handleAppRegister" style="margin-left: 10px;">注册</Button>
                        <span style="color:#aaa;margin-left: 10px;">先保存，再注册</span>
                    </div>
                </Card>
                <Card v-show="false">
                    <template #title>短信</template>
                    <div style="margin-bottom: 10px;">
                        <p>腾讯短信接口</p>
                        <Form :label-width="120">
                            <FormItem label="sign_name">
                                <Input v-model="configs.sign_name" style="width:300px;"></Input>
                            </FormItem>
                            <FormItem label="secret_id">
                                <Input v-model="configs.secret_id" style="width:300px;"></Input>
                            </FormItem>
                            <FormItem label="secret_key">
                                <Input v-model="configs.secret_key" style="width:300px;"></Input>
                            </FormItem>
                            <FormItem label="template_id">
                                <Input v-model="configs.template_id" style="width:300px;"></Input>
                            </FormItem>
                            <FormItem label="template_param">
                                <Input v-model="configs.template_param" style="width:300px;"></Input>
                            </FormItem>
                        </Form>
                        <div>
                            <Button type="primary">保存</Button>
                        </div>
                    </div>
                </Card>
            </TabPane>
            <TabPane label="命令" name="name4">
                <Card style="margin-bottom: 15px;">
                    <template #title>
                        <span style="line-height: 24px;">服务器默认值</span>
                    </template>
                    <Form :label-width="100">
                        <FormItem label="服务器地址">
                            <Input v-model="configs.cmd_server_ip" style="width:300px;"></Input>
                        </FormItem>
                        <FormItem label="服务器端口">
                            <Input v-model="configs.cmd_server_port" style="width:100px;" type="number" min="1" max="65535"></Input>
                        </FormItem>
                    </Form>
                    <div>
                        <Button type="primary" @click="handleSaveServerConfigs" style="margin-left:15px;">保存</Button>
                    </div>
                </Card>
                <Card style="margin-bottom: 15px;">
                    <template #title>
                        <span style="line-height: 24px;">iperf3服务</span>
                    </template>
                    <Form :label-width="100">
                        <FormItem label="服务端口">
                            <Input v-model="configs.cmd_iperf3_server_port" style="width:100px;" type="number"></Input>
                            <Button type="primary" @click="handleSaveIperf3Configs" style="margin-left:15px;">保存</Button>
                        </FormItem>
                        <FormItem label="开启服务">
                            <Switch v-model="configs.cmd_iperf3_server_enable" size="small" @on-change="handleIperf3EnableChange" />
                        </FormItem>
                    </Form>
                </Card>
            </TabPane>
            <TabPane label="中继服务" name="name2">
                <Card style="margin-bottom: 15px;">
                    <template #title>
                        <span style="line-height: 24px;">中继服务</span>
                    </template>
                    <Form>
                        <FormItem label="中继服务密码">
                            <Input v-model="configs.relay_service_password" style="width:300px;" type="password" password></Input>
                            <Button type="primary" @click="handleSaveRelayServiceConfigs" style="margin-left:15px;">保存</Button>
                        </FormItem>
                        <FormItem label="开启中继服务">
                            <Switch v-model="configs.relay_service_enable" size="small" @on-change="handleRelayEnableChange" />
                        </FormItem>
                        <FormItem label="是否允许注册">
                            <Switch v-model="configs.relay_register_enable" size="small" @on-change="handleRelayRegisterEnableChange" />
                        </FormItem>
                    </Form>
                    <div>
                    </div>
                </Card>
                <Card style="margin-bottom: 15px;">
                    <template #title>
                        <span style="line-height: 24px;">APP管理</span>
                    </template>
                    <template #extra>
                        <Button size="small" @click="handleGetApps" style="margin-right: 10px;">刷新列表</Button>
                        <AppAddButton @success="handleGetApps" />
                    </template>
                    <Table :data="app_data.data" :columns="app_data.columns" stripe border>
                        <template #app_id="{ row }">
                            <div v-if="row.app_name">
                                <div>{{ row.app_name }}</div>
                                <div style="color: #aaa;font-size: 10px;">{{ row.app_id }}</div>
                            </div>
                            <div v-else>{{ row.app_id }}</div>
                        </template>
                        <template #app_enable="{ row }">
                            <AppEnableButton :data="row" />
                        </template>
                        <template #action="{ row }">
                            <AppCheckButton v-if="!row.app_checked" :data="row" @success="handleGetApps"></AppCheckButton>
                            <AppEditButton v-if="row.app_checked" :data="row" @success="handleGetApps"></AppEditButton>
                            <AppDeleteButton v-if="row.app_checked" :data="row" @success="handleGetApps"></AppDeleteButton>
                        </template>
                    </Table>
                </Card>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import AppAddButton from './AppAddButton.vue';
import AppCheckButton from './AppCheckButton.vue';
import AppEditButton from './AppEditButton.vue';
import AppDeleteButton from './AppDeleteButton.vue';
import AppEnableButton from './AppEnableButton.vue';

export default {
    name: "SettingsView",
    components: {
        AppAddButton,
        AppEditButton,
        AppCheckButton,
        AppDeleteButton,
        AppEnableButton
    },
    data() {
        return {
            app_data: {
                data: [],
                columns: [
                    { title: '应用ID', slot: 'app_id', align: 'center' },
                    { title: '应用状态', slot: 'app_enable', align: 'center' },
                    { title: '操作', slot: 'action', align: 'center' }
                ]
            },
            app_edit_modal: false,
            app_check_modal: false
        };
    },
    computed: {
        ...mapGetters([ 'configs' ])
    },
    methods: {
        ...mapMutations([ 'setConfigData', 'setAppsBriefData' ]),
        handleSaveReceiverEmailConfigs() {
            this.$http.post('/save_receiver_email_configs', {
                email_receiver_address: this.configs.email_receiver_address,
                email_subject: this.configs.email_subject
            }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('保存成功');
                }else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleSaveEmailConfigs() {
            this.$http.post('/save_email_configs', {
                email_smtp_server: this.configs.email_smtp_server,
                email_smtp_port: this.configs.email_smtp_port,
                email_sender_address: this.configs.email_sender_address,
                email_sender_password: this.configs.email_sender_password
            }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('保存成功');
                }else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleTestEmail() {
            this.$http.post('/test_email', {
                email_smtp_server: this.configs.email_smtp_server,
                email_smtp_port: this.configs.email_smtp_port,
                email_sender_address: this.configs.email_sender_address,
                email_sender_password: this.configs.email_sender_password,
                email_subject: this.configs.email_subject,
                email_receiver_address: this.configs.email_receiver_address
            }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success(res.data);
                }else {
                    this.errorMessage({
                        content: res.data,
                        duration: 5
                    });
                }
            });
        },
        handleNoticeForceRelayChange() {
            this.$http.post('/config_notice_force_relay', { notice_force_relay: this.configs.notice_force_relay ? 1 : 0 }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('切换成功');
                } else {
                    this.errorMessage('切换失败');
                }
            });
        },
        handleEmailEnableChange() {
            this.$http.post('/config_email_enable', { email_enable: this.configs.email_enable ? 1 : 0 }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('切换成功');
                } else {
                    this.errorMessage('切换失败');
                }
            });
        },
        handleSaveLogConfigs() {
            this.$http.post('/save_log_configs', {
                log_maxcount: this.configs.log_maxcount
            }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('保存成功');
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleSaveNoticeConfigs() {
            this.$http.post('/save_notice_configs', {
                alarm_notice_interval: this.configs.alarm_notice_interval,
                notice_force_relay: this.configs.notice_force_relay ? 1 : 0
            }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('保存成功');
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleSaveAppSelfConfigs() {
            this.$http.post('/save_app_self_configs', {
                app_id: this.configs.app_id,
                app_name: this.configs.app_name
            }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('保存成功');
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleCreateAppSecret() {
            this.$http.post('/create_app_secret', {  }).then(res => {
                if (res.status == 'ok') {
                    this.configs.app_secret = res.data;
                    this.$Message.success('密钥更新成功');
                }else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleSaveRelayConfigs() {
            this.$http.post('/save_relay_configs', {
                relay_url: this.configs.relay_url,
                relay_password: this.configs.relay_password
            }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('保存成功');
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleAppRegister() {
            this.$http.post('/app_register_to_service', { }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('注册成功');
                } else {
                    this.errorMessage(res.data);
                }
            })
        },
        handleRelayEnableChange() {
            this.$http.post('/relay_service_enable', { relay_service_enable: this.configs.relay_service_enable ? 1 : 0 }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('切换成功');
                } else {
                    this.errorMessage('切换失败');
                }
            });
        },
        handleRelayRegisterEnableChange() {
            this.$http.post('/relay_register_enable', { relay_register_enable: this.configs.relay_register_enable ? 1 : 0 }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('切换成功');
                } else {
                    this.errorMessage('切换失败');
                }
            });
        },
        handleSaveRelayServiceConfigs() {
            this.$http.post('/save_relay_service_configs', {
                relay_service_password: this.configs.relay_service_password
            }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('保存成功');
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleSaveServerConfigs() {
            this.$http.post('/save_cmd_server_configs', {
                cmd_server_ip: this.configs.cmd_server_ip,
                cmd_server_port: this.configs.cmd_server_port,
            }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('保存成功');
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleSaveIperf3Configs() {
            this.$http.post('/save_iperf3_configs', {
                cmd_iperf3_server_port: this.configs.cmd_iperf3_server_port,
                // cmd_iperf3_server_enable: this.configs.cmd_iperf3_server_enable
            }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('保存成功');
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleIperf3EnableChange() {
            this.$http.post('/config_iperf3_enable', { cmd_iperf3_server_enable: this.configs.cmd_iperf3_server_enable? 1 : 0 }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('切换成功');
                } else {
                    this.errorMessage('切换失败');
                }
            });
        },
        handleGetApps() {
            this.$http.get('/get_apps').then(res => {
                let data = res.data;
                let apps_brief_data = {}
                data.forEach(item => {
                    item.app_enable = item.app_enable == 1;
                    apps_brief_data[item.app_id] = item.app_name;
                });
                this.setAppsBriefData(apps_brief_data);
                this.app_data.data = data;
            });
        },
    },
    created() {
        this.handleGetApps();
    }
}
</script>